﻿@page "/logouts"

<h3>Logout 登出组件</h3>

<h4>用于网站登出操作</h4>

<DemoBlock Title="普通用法" Introduction="直接使用内置模板使用" Name="Normal">
    <Logout ImageUrl="_content/BootstrapBlazor.Shared/images/Argo.png" DisplayName="Administrators" UserName="Admin" class="bg-secondary" />
    <div style="height: 80px;"></div>
</DemoBlock>

<DemoBlock Title="仅显示头像" Introduction="设置 <code>ShowUserName</code> 值为 <code>false</code>" Name="ShowUserName">
    <Logout ImageUrl="_content/BootstrapBlazor.Shared/images/Argo.png" DisplayName="Administrators" UserName="Admin" ShowUserName="false" class="bg-secondary" />
    <div style="height: 80px;"></div>
</DemoBlock>

<DemoBlock Title="自定义显示模板" Introduction="设置 <code>ChildContent</code> 或者在组件内部直接写其他组件即可" Name="ChildContent">
    <Logout ImageUrl="_content/BootstrapBlazor.Shared/images/Argo.png" DisplayName="Administrators" UserName="Admin">
        <i class="fa fa-fw fa-user"></i>
        <span>自定义显示内容</span>
    </Logout>
    <div style="height: 80px;"></div>
</DemoBlock>

<DemoBlock Title="自定义登录信息模板" Introduction="设置 <code>HeaderTemplate</code>" Name="HeaderTemplate">
    <Logout ImageUrl="_content/BootstrapBlazor.Shared/images/Argo.png" DisplayName="Administrators" UserName="Admin" class="bg-warning">
        <HeaderTemplate>
            <div class="d-flex flex-fill align-items-center">
                <img alt="avatar" src="_content/BootstrapBlazor.Shared/images/Argo-C.png" style="border-radius: 50%;">
                <div class="flex-fill">
                    <div class="logout-dn">总经理</div>
                    <div class="logout-un">Admin</div>
                </div>
            </div>
        </HeaderTemplate>
    </Logout>
    <div style="height: 80px;"></div>
</DemoBlock>

<DemoBlock Title="自定义链接模板" Introduction="设置 <code>LinkTemplate</code>" Name="LinkTemplate">
    <Logout ImageUrl="_content/BootstrapBlazor.Shared/images/Argo.png" DisplayName="Administrators" UserName="Admin" class="bg-primary">
        <LinkTemplate>
            <a href="#">个人中心</a>
            <a href="#">设置</a>
            <LogoutLink />
        </LinkTemplate>
    </Logout>
    <div style="height: 220px;"></div>
</DemoBlock>

<AttributeTable Items="GetAttributes()"></AttributeTable>
